<template>
  <div shadow='never'
           class='aui-card--fill scroll-box card-box bannerSet'>
    <div class="pane-shell">
      <el-button type="primary"
                plain
                icon="el-icon-plus"
                v-if="$hasPermission('tb:bannerGraph:add')"
                @click="addOrUpdateHandle()">新增</el-button>
      <div class="space-between banner-list pane-shell" v-for="(item,index) in bannerList" :key="index">
        <img class="img" :src="item.imageUrl" alt="" />
        <div class="space-between">
          <el-button type="text"
                    size="mini"
                    class="brand"
                    v-if="$hasPermission('tb:bannerGraph:revise')"
                    @click="addOrUpdateHandle(item)">{{ $t('edit') }}</el-button>
          <el-button size="mini"
                    type="text"
                    style="color: red;"
                    class='danger'
                    v-if="$hasPermission('tb:bannerGraph:delImage')"
                    @click="deleteHandle({id:item.id,callBack:getBanner.bind()})">{{ $t('delete') }}</el-button>
        </div>
      </div>
    </div>
    <div>
      <BannerAddOrUpdate ref="addOrUpdate"
                         @callBack="getBanner()" />
    </div>
  </div>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import minFormValidate from '@/mixins/form-validate'
import BannerAddOrUpdate from './app-Banner-add-or-update.vue'
export default {
  mixins: [mixinViewModule, minFormValidate],
  data () {
    return {
      mixinViewModuleOptions: {
        deleteImgURL: '',
        getDataListURL: 'tb/bannerGraph/conditionQuery', // 数据列表接口，API地址
        getDataListIsPage: true, // 数据列表接口，是否需要分页？
        addURL: '', // 添加或修改接口，API地址
        updateURL: '', // 添加或修改接口，API地址
        getDataInfoURL: '', // 数据详情，API地址
        deleteURL: 'tb/bannerGraph/delImage', // 删除接口，API地址
        deleteIsBatch: true, // 删除接口，是否需要批量？
        exportURL: '' // 导出接口，API地址
      },
      bannerList: []
    }
  },
  components: { BannerAddOrUpdate },
  mounted () {
    this.getBanner()
  },
  methods: {
    getBanner () {
      this.bannerList = []
      this.$http.get('tb/bannerGraph/conditionQuery').then(({ data: res }) => {
        this.bannerList = res.data
        // console.log(this.bannerList)
      })
    },
    addOrUpdateHandle (_id) {
      if (_id) {
        this.$refs.addOrUpdate.init(_id)
      } else {
        if (this.bannerList.length >= 5) {
          this.$alert('当前轮播图只能添加5个', '', {
            confirmButtonText: '确定'
            // callback: action => {
            //   this.$message({
            //     type: 'info',
            //     message: `action:${action}`
            //   })
            // }
          })
        } else {
          this.$refs.addOrUpdate.init()
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.space-between {
  display: flex;
  justify-content: flex-start;
  margin-left: 20px;
}
.banner-list {
  margin: 10px 0;
}
.bannerSet ::deep .el-radio-button__inner {
  font-size: 12px;
}
.img {
  width: 40%;
  height: 200px;
}
</style>
